(function(){
    //第一幅轮播图的图片盒子
    let bgImg=document.querySelector(".container_1 .bg .swiper-wrapper");//背景盒子
    let conImg=document.querySelector(".container_1 .sw_bg .swiper-wrapper");//内容盒子
    //热门推荐的盒子
    let hotbox=document.getElementById("hotbox");
    //第二幅轮播图的图片盒子   新碟上架
    let SwiperTwoBox=document.querySelector(".mySwiperTwo .swiper-wrapper");
    //飙升榜盒子
    let upsongbox=document.getElementById("upsong");
    //新歌榜盒子
    let newsongbox=document.getElementById("newsong");
    //原创榜盒子
    let originsongbox=document.getElementById("originsong");
    
    //1.获取数据
    axios.get("./data.json").then(response=>{
        return  response.data
    }).then(value=>{
        render(value);
    }).catch(err=>{
        console.log(err);
    })

    //封装方法 榜单
    function songlist(songbox,data){
        let str="";
        data.forEach((item,index)=>{
            str+=`<li>
                    <span>${index+1}</span>
                    <a href="">${item.music}</a>
                    <div class="oper">
                    <a class="oper_1" href=""></a>
                    <a class="oper_2" href=""></a>
                    <a class="oper_3" href=""></a>
                    </div>
            </li>`
      })
      songbox.innerHTML=str;
    }

    //2.循环渲染+部分功能
    function render(data){
        //console.log(data)
        //循环渲染第一幅轮播图
        let strbg="";
        let strCon="";
        data[0].swiper1.forEach(item => {
             strbg+=`<div class="swiper-slide">
                        <img src="${item.background}"  alt="">
                    </div>`
             strCon+=`<div class="swiper-slide">
                        <img src="${item.pic}" alt="">
                    </div>`
        });
        bgImg.innerHTML=strbg;
        conImg.innerHTML=strCon;

       //第一幅轮播图的功能
        let mySwiperOnebg = new Swiper (".mySwiperOnebg", {
            effect: 'fade',//淡入淡出切换效果
            loop: true,  
        })
        let mySwiperOne = new Swiper (".mySwiperOne", {
            controller: {//双向控制
                control: mySwiperOnebg,
            },
            effect: 'fade',//淡入淡出切换效果
            //自动轮播
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,//点击完之后还能自动轮播
            },
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable :true,//点击小圆点切换
              bulletClass:'my-bullet',//非激活状态的class
              bulletActiveClass:'my-bullet-active'//激活状态的class
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            }
        })  
        
        //热门推荐
        let hotstr="";
        data[2].recommend.forEach((item)=>{
            let {id,pic,nb,tit,i}=item;
            hotstr+=`<li data-id=${id}>
                    <div class="img">
                    <img src="${pic}" alt="">
                    <a class="eff" href=""></a>
                    <div class="btm">
                        <a href=""></a>
                        <span class="icon-headset"></span>
                        <span class="nb">${nb}</span>
                    </div>
                    </div>
                    <p>${i?'<i></i>':''}<a href="">${tit}</a></p>
                </li>`
        })
        hotbox.innerHTML=hotstr;

        //新碟上架
        let strSwiperTwo="";
        data[1].swiper2.forEach((item)=>{
            let {id,pic,title,creator}=item;
            strSwiperTwo+=`<div class="swiper-slide" data-id=${id}>
                    <img src="${pic}"
                    alt="">
                    <a class="ply" href=""></a>
                    <a class="msk" href=""></a>
                    <p class="tit1"><a href="">${title}</a></p>
                    <p class="tit2"><a href="">${creator}</a></p>
                </div> `
        })
        SwiperTwoBox.innerHTML=strSwiperTwo;

        //新碟上架 轮播图
        var mySwiperTwo = new Swiper ('.mySwiperTwo', {
            slidesPerView : 5,//同时展示 5个
            slidesPerGroup : 5,//每次切换 5个
            loop: true, // 循环模式选项
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
        }) 
        
        //飙升榜  热歌榜 原创榜
        songlist(upsongbox,data[3])//飙升榜
        songlist(newsongbox,data[4])// 热歌榜
        songlist(originsongbox,data[5])//原创榜
    }

    //返回顶部
    let back=document.querySelector(".back");
    let html=document.documentElement||document.body;
    window.onscroll=function(){
        if(html.scrollTop>100){
            back.style.opacity=1;
            back.style.zIndex=9999;
        }else{
            back.style.opacity=0;
            back.style.zIndex=-9999;
        }
    }

})();

(function(){
   let play=document.getElementById("play");//播放按钮
   let audioBox=document.getElementById("audioBox");//音频
   let cur=document.getElementById("cur");//进度条
   let timeEm=document.querySelector("#mus_time em");//播放时间显示
   let timeSpan=document.querySelector("#mus_time span");//总时间显示
   let timer=null;//定时器
   let myplayer=document.getElementById("myplayer");//整个播放器
   let vol=document.querySelector(".vol");//声音调节盒子
   let loop_tip=document.querySelector(".loop_tip");//播放盒子的提示文字
   let icn_list=document.querySelector(".icn_list");//播放列表的值
   let musicPic=document.getElementById("musicPic");//音乐图片
   let tit_mus=document.querySelector(".tit_mus");//音乐名称
   let tit_aur=document.querySelector(".tit_aur");//音乐名称

    //将时间转换为分秒
    function formatTime(time){
        let minutes=Math.floor(time/60);
        let seconds=Math.ceil(time-minutes*60);
        if(minutes<10){minutes="0"+minutes}
        if(seconds<10){seconds="0"+seconds}
        return `${minutes}:${seconds}`
    }

   //1.先向播放列表里面添加歌曲---》自己手动添加
   let musicMethod={
      songs:[],//音乐列表
      index:0,//目前播放音乐的索引下标
      add(url,pic,name,author){//添加音乐
         this.songs.push({url,pic,name,author});
         icn_list.innerHTML=this.songs.length; 
      },
      change(){//更换 音乐图片，音乐地址，音乐名称，音乐作者  同时播放音乐
         //1.音乐图片
         musicPic.src=this.songs[this.index]["pic"];
         //2.音乐地址
         audioBox.src=this.songs[this.index]["url"];
         //3.音乐名称
         tit_mus.innerHTML=this.songs[this.index]["name"];
         //4.音乐作者
         tit_aur.innerHTML=this.songs[this.index]["author"];
         //5.播放音乐
         this.showPlay()
      },
      showPlay(){//音乐播放
        if(audioBox.paused){
            audioBox.play();
            play.classList.add("pas");//暂停按钮效果
            timer=setInterval(()=>{
                this.showProgress()
            },1000)
          }else{
            audioBox.pause();
            play.classList.remove("pas");//播放按钮效果
            clearInterval(timer);
            timer=null;
          }
      },
      showProgress(){//设置进度条
        let allTime=audioBox.duration;//总时间 直接求，求不出来，必须缓存后求
        let curTime=audioBox.currentTime;//播放时间  
        if(isNaN(allTime)||isNaN(curTime)){
            return
        }
        timeEm.innerHTML=formatTime(curTime);//显示播放时间
        timeSpan.innerHTML="/ "+formatTime(allTime);//显示总时间
        let result=parseFloat(curTime/allTime*100).toFixed(3);
        if(result>100){
           result=100;
        }
        //进入下一首---拖拽调试
        if(curTime>=allTime||result==100||audioBox.ended){
            this.next();
        }
        cur.style.width=result+"%";
     },
      next(){//下一首
         this.index++;
         //0,1,2,3     3
         if(this.index>this.songs.length-1){
             this.index=0;
         }
         this.change();
      },
      prev(){//上一首
         this.index--;
         if(this.index<0){
            this.index=this.songs.length-1;
         }
         this.change();
      }
   }
   //自己手动添加---4首音乐
   musicMethod.add("./media/合拍.m4a", "https://p1.music.126.net/Ethtz4VJFKtuuhpcd9WLzg==/109951168252754401.jpg?param=34y34", "合拍", "许嵩");
   musicMethod.add("./media/精卫.m4a", "https://p3.music.126.net/jSH_ikeooxveWl0BTc3Xkg==/109951166786983190.jpg?param=34y34", "精卫", "30年前，50年后");
   musicMethod.add("./media/若把你.m4a", "https://p4.music.126.net/M877M2-VhWZiLPVFORf9iQ==/109951163401482434.jpg?param=34y34", "若把你", "Kirsty刘瑾睿");
   musicMethod.add("./media/我记得.m4a", "https://p4.music.126.net/FCWD6ibS2JK2B3QAnXuzwQ==/109951167805892385.jpg?param=34y34", "我记得", "赵雷");

   //底部音乐组点击事件---事件委托
   myplayer.onclick=function(e){
     //上一首
     if(e.target.tagName=="A"&&e.target.className.includes("pre")){
        musicMethod.prev();
     }
     //点击中间的播放
     if(e.target.tagName=="A"&&e.target.className.includes("play")){
        musicMethod.showPlay();
     }
     //下一首
     if(e.target.tagName=="A"&&e.target.className.includes("nex")){
        musicMethod.next();
     }
     //声音
     if(e.target.tagName=="A"&&e.target.className.includes("icn_vol")){
        if(vol.style.display=="block"){
            vol.style.display="none";
        }else{
            vol.style.display="block";
        }
        return;
     }
     //切换播放模式
     if(e.target.tagName=="A"&&e.target.className.includes("icn_c")){
        //点击后提示文字，立刻显示，1000毫秒后隐藏
        loop_tip.style.display="block";
        setTimeout(()=>{
            loop_tip.style.display="none";
        },1000)

        //1.如果是循环模式(icn_loop)---》随机模式(icn_shuff)
        if(e.target.className.includes("icn_loop")){
            e.target.classList.remove("icn_loop");
            e.target.classList.add("icn_shuff");
            loop_tip.innerHTML="随机";
            return
        }
        //2.如果是随机模式(icn_shuff)--->单曲循环(icn_one)
        if(e.target.className.includes("icn_shuff")){
            e.target.classList.remove("icn_shuff");
            e.target.classList.add("icn_one");
            loop_tip.innerHTML="单曲循环";
            return
        }
        //3.如果是单曲循环(icn_one)--->循环模式(icn_loop)
        if(e.target.className.includes("icn_one")){
            e.target.classList.remove("icn_one");
            e.target.classList.add("icn_loop");
            loop_tip.innerHTML="循环";
            return
        }
     }
   }
   //一按打开页面，先缓存，之后求总时间
   audioBox.onloadedmetadata=musicMethod.showProgress;
})();
